<template>
  <el-dialog v-model="show" :destroy-on-close="true">
    <ProTable ref="proRef" :request-api="getBrokersCanBindThisLouPan" :columns="columns" :init-param="params">
      <template #tableHeader="scope">
        <el-button
          type="primary"
          v-auth="'添加驻守'"
          @click="addGarrison(scope.selectedListIds)"
          :disabled="scope.selectedListIds.length === 0"
          >批量添加</el-button
        >
      </template>
      <template #avatar="{ row }">
        <el-avatar :src="row.avatar" shape="circle" :size="90"></el-avatar>
      </template>
      <template #opera="{ row }">
        <el-button link type="primary" @click="addGarrison([row.id])" v-auth="'添加驻守'">添加驻守</el-button>
      </template>
    </ProTable>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { addBroker, getBrokersCanBindThisLouPan } from "@/api/modules/loupan";
import { useHandleData } from "@/hooks/useHandleData";
const show = ref(false);

const params = reactive({ lou_id: 0 });

const open = (id: number) => {
  show.value = true;
  params.lou_id = id;
};

const columns: ColumnProps[] = [
  { type: "selection", width: 60 },
  { prop: "real_name", label: "姓名", width: 100 },
  {
    prop: "avatar",
    label: "头像",
    width: 120
  },
  { prop: "phone", label: "手机" },
  { prop: "opera", label: "操作" }
];

// 添加驻守
const emits = defineEmits(["success"]);
const addGarrison = async (ids: any) => {
  try {
    await useHandleData(addBroker, { lou_id: params.lou_id, brokers: ids }, "绑定该楼盘");
    show.value = false;
    emits("success");
  } catch (error) {}
};

defineExpose({ open });
</script>

<style></style>
